<script setup>
import { onMounted, ref, watch } from 'vue'
import axios from "axios";
import { ElMessage } from "element-plus";

// 默认激活的标签页
const activeName = ref('car')

const carBrands = ref([])
const productBrands = ref([])

// 为每个标签页创建独立的分页参数
const carPage = ref({
  current: 1,
  size: 10,
  total: 0
})

const productPage = ref({
  current: 1,
  size: 10,
  total: 0
})

// 分页事件处理
const handleSizeChange = (newSize) => {
  if (activeName.value === 'car') {
    carPage.value.size = newSize
  } else {
    productPage.value.size = newSize
  }
  list()
}

const handleCurrentChange = (newPage) => {
  if (activeName.value === 'car') {
    carPage.value.current = newPage
  } else {
    productPage.value.current = newPage
  }
  list()
}

// 列表加载函数
const loadCarBrands = async () => {
  try {
    const res = await axios.get(`/carcenter-service-order/car-brands/getDetailList/${carPage.value.current}/${carPage.value.size}`)
    carBrands.value = res.data.data.data
    carPage.value.total = res.data.data.total
  } catch (error) {
    ElMessage.error('加载汽车品牌失败')
  }
}

const loadProductBrands = async () => {
  try {
    const res = await axios.get(`/carcenter-service-order/product-brands/getProductDetail/${productPage.value.current}/${productPage.value.size}`)
    productBrands.value = res.data.data.data
    productPage.value.total = res.data.data.total
  } catch (error) {
    ElMessage.error('加载商品品牌失败')
  }
}

const list = async () => {
  if (activeName.value === 'car') {
    await loadCarBrands()
  } else {
    await loadProductBrands()
  }
}
const current = ref( activeName === 'car' ? carPage.value.current : productPage.value.current)
const size = ref( activeName === 'car' ? carPage.value.size : productPage.value.size)

// 监听标签页切换
watch(activeName, (newVal) => {
  if (newVal === 'car' && carBrands.value.length === 0) {
    loadCarBrands()
  } else if (newVal === 'product' && productBrands.value.length === 0) {
    loadProductBrands()
  }
})
//新增按钮
const dialogVisible = ref(false);
const brandFormRef = ref(null);

const brandForm = ref({});

const rules = {
  brandName: [
    { required: true, message: '请输入品牌名称', trigger: 'blur' }
  ]
};

const openDialog = () => {
  dialogVisible.value = true;
};

const closeDialog = () => {
  dialogVisible.value = false;
  brandFormRef.value.resetFields();
  brandForm.value = {};
};
//新增
const submitForm = (type) => {
  brandFormRef.value.validate((valid) => {
    if (valid) {
      if(type === 'car') {
        axios.post('/carcenter-service-order/car-brands/add', brandForm.value).then(res => {
          // 提交表单逻辑
          ElMessage.success('汽车品牌添加成功');
          closeDialog();
          list();
        })
      }else {
        axios.post('/carcenter-service-order/product-brands/add', brandForm.value).then(res => {
          // 提交表单逻辑
          ElMessage.success('商品品牌添加成功');
          closeDialog();
          list();
        })
      }
    } else {
      ElMessage.error('请检查输入信息');
      return false;
    }
  });
};
const editSubmitForm = (type) => {
  brandFormRef.value.validate((valid) => {
    if (valid) {
      if(type === 'car') {
        axios.put('/carcenter-service-order/car-brands/update', brandForm.value).then(res => {
          // 提交表单逻辑
          ElMessage.success('修改成功');
          closeDialog();
          list();
        })
      }else {
        axios.put('/carcenter-service-order/product-brands/update', brandForm.value).then(res => {
          // 提交表单逻辑
          ElMessage.success('修改成功');
          closeDialog();
          list();
        })
      }
    } else {
      ElMessage.error('请检查输入信息');
      return false;
    }
  });
};

// 编辑方法
const handleEdit = (row, type) => {
  if (type === 'car') {
    axios.get(`/carcenter-service-order/car-brands/getById/${row.id}`).then(res => {
      brandForm.value = res.data.data;
      dialogVisible.value = true;
      // editSubmitForm(type);
    })
  }else {
    axios.get(`/carcenter-service-order/product-brands/getById/${row.id}`).then(res => {
      brandForm.value = res.data.data;
      dialogVisible.value = true;
      // editSubmitForm(type);
    })
  }
}

// 删除方法
const handleDelete = (row, type) => {
  if (type === 'car') {
    axios.delete(`/carcenter-service-order/car-brands/delete/${row.id}`).then(res => {
      ElMessage.success('删除成功');
      list();
    })
  }else {
    axios.delete(`/carcenter-service-order/product-brands/delete/${row.id}`).then(res => {
      ElMessage.success('删除成功');
      list();
    })
  }

}
onMounted(() => {
  list()
})

</script>

<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <!-- 汽车品牌标签页 -->
    <el-tab-pane label="汽车品牌" name="car">
      <!-- 触发弹窗的按钮 -->
      <el-button @click="openDialog('car')" type="primary"><el-icon><Plus /></el-icon>新增</el-button>
      <el-table :data="carBrands" style="width: 100%">
        <el-table-column prop="brandName" label="品牌名称" width="180"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.row, 'car')"><el-icon><Edit /></el-icon>编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row, 'car')"><el-icon><Delete /></el-icon>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>

    <!-- 商品品牌标签页 -->
    <el-tab-pane label="商品品牌" name="product">
      <!-- 触发弹窗的按钮 -->
      <el-button type="primary" @click="openDialog('product')"><el-icon><Plus /></el-icon>新增</el-button>
      <el-table :data="productBrands" style="width: 100%">
        <el-table-column prop="brandName" label="品牌名称" width="180"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.row, 'product')"><el-icon><Edit /></el-icon>编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row, 'product')"><el-icon><Delete /></el-icon>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <div>

      <!-- 新增品牌弹窗 -->
      <el-dialog v-model="dialogVisible"  width="30%">
        <h3 v-if="brandForm.id===undefined">新增品牌</h3>
        <h3 v-else>编辑品牌</h3>
        <el-form :model="brandForm" :rules="rules" ref="brandFormRef">
          <el-form-item label="" prop="brandName">
            <el-input v-model="brandForm.brandName" placeholder="请输入品牌名称"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="brandForm.id===undefined?submitForm(activeName):editSubmitForm(activeName)">确认</el-button>
        </span>
        </template>
      </el-dialog>
    </div>
    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="current"
        v-model:page-size="size"
        :page-size-options="[ 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="activeName === 'car' ? carPage.total : productPage.total"
    />
  </el-tabs>
</template>

<style scoped>

</style>